<template>
    <div class="TableT">
        <div class="title">内容管理-公共字段管理-执业类型分类添加2级列表</div>
        <div class="UserAg_bg">
            <div class="box">
                <div class="Practitop">
                    <el-input v-model="input" size="small" class="search" placeholder="请输入名称"></el-input>
                    <el-button size="small" class="Prabtn"  type="primary">查询</el-button>
                    <el-button size="small" class="Prabtn"  type="primary">重置</el-button>
                </div>
                <div class="icon_font">
                    <div class="el-icon-circle-plus-outline" @click.prevent="addRow()"></div>
                    <div class="el-icon-delete" @click.prevent="delData()"></div>
                </div>
            </div>
            <div class="table">
                <el-table
                        :header-cell-style="{background:'rgba(247,249,252,.5)',color:'#1F2E4D',}"
                        class="tabheader"
                        @selection-change='selectRow'
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            label="编号"
                            type="index"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="Advertising"
                            label="名称"
                            width="180">
                        <template slot-scope="scope">
                            <input type="text" value="不限" v-if="isInp==true" class="linpName">
                            <div v-if="isInp==false">机电工程</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="title"
                            align="center"
                            label="排序"
                            width="190">
                        <template slot-scope="scope">
                            <input type="text" value="1" v-if="isInp==true" class="linp">
                            <div v-if="isInp==false">1</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    class="tableBtn"
                                    size="mini"
                                    @click="handleEdit()">
                                {{msg}}
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "TableT",
        data(){
            return{
                input:'',
                tableData: [
                    {

                    }
                ],
                msg: '编辑' ,
                isInp:false,//编辑后改为  确定
                selectlistRow:[]
            }
        },
        methods:{
            handleEdit(){
                if (this.msg=='编辑'){
                    this.isInp=true
                    this.msg = '确定'
                } else{
                    this.isInp=false
                    this.msg = '编辑'
                }
            },
            // 增加行
            addRow () {
                var list = {
                    rowNum: '',
                    Advertising: this.Advertising,
                    title: this.title,
                }
                this.tableData.unshift(list)
            },
            // 删除方法
            // 删除选中行
            delData () {
                for (let i = 0; i < this.selectlistRow.length; i++) {
                    let val = this.selectlistRow
                    // 获取选中行的索引的方法
                    // 遍历表格中tableData数据和选中的val数据，比较它们的rowNum,相等则输出选中行的索引
                    // rowNum的作用主要是为了让每一行有一个唯一的数据，方便比较，可以根据个人的开发需求从后台传入特定的数据
                    val.forEach((val, index) => {
                        this.tableData.forEach((v, i) => {
                            if (val.rowNum === v.rowNum) {
                                // i 为选中的索引
                                this.tableData.splice(i, 1)
                            }
                        })
                    })
                }
                // 删除完数据之后清除勾选框
                this.$refs.tableData.clearSelection()
            },
            //table事件
            selectRow(val){
                this.selectlistRow = val
                console.log(this.selectlistRow)
            }
        }
    }
</script>

<style scoped>
    .TableT{
        width: 100%;
        height: 100vh;
        margin-left: 10px;
        background-color: #f7f9fc;
    }
    .title {
        height: 43px;
        line-height: 43px;
    }

    .UserAg_bg {
        width: 100%;
        height: 600px;
        background-color: white;
    }
    .Practitop{
        padding-top:27px ;
        margin-left: 25px;
    }
    .search{
        width: 239px;
    }
    .Prabtn{
        width: 49px;
        height: 32px;
        background-color: #3377ff;
        margin-right: 25px;
    }
    .box{
        display: flex;
        flex-direction: row;
    }
    .icon_font{
        font-size:22px;
        padding-top:27px;
        margin-left: 20px;
    }
    .icon_font>div:nth-child(1){
        /*color: #199ed8;*/
        margin-right:30px;
    }
    .table {
        width: 96%;
        margin: 0 auto;
        box-sizing: border-box;
        border: 1px solid #f7f7f7;
        margin-top: 27px;
    }
    .tableBtn {
        width: 140px;
        height: 39px;
        font-size: 14px;
        color: #3377ff;
    }

    .linp {
        width: 25px;
        height: 25px;
        text-align: center;
    }
    .linpName{
        width:140px;
        height: 25px;
    }
</style>
